import React, { Component } from 'react';
import { View, Text, Alert } from 'react-native';
import { observer } from 'mobx-react';
import { List } from 'antd-mobile';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { age } from '../../../../utils';
import styles from './style';

const Item = List.Item;
const alert = Alert.alert;

@observer
class MemberDetail extends Component {
  removeMember = (customerId, id) => {
    alert('删除家庭成员', `您确定要删除家庭成员${this.props.store.currentMember.name}吗 ?`, [
      {
        text: '取消',
      },
      {
        text: '删除',
        onPress: () => {
          this.props.store.remove.bind(this.props.store, customerId, id)();
          Actions.pop();
        },
        style: { color: '#f00' }
      }
    ]);
  };
  render() {

    if (!this.props.store.currentMember) {
      return null;
    }
    const currentMember = this.props.store.currentMember;
    return (
      <View style={styles.wrap}>
        <View style={styles.top}>
          <View style={styles.avatar}>
            <Icon name="face" size={64} color="#ddd" />
            <Text style={styles.name}>{currentMember.name}</Text>
          </View>
          <View style={styles.memberInfo}>
            <View style={styles.miItem}>
              <Text style={styles.miItemText}>
                {age(currentMember.birthday)}
              </Text>
              <Text style={[styles.miItemText, styles.miitTitle]}>年龄</Text>
            </View>
            <View style={[styles.miItem, styles.miItemCenter]}>
              <Text style={styles.miItemText}>
                {currentMember.relationTypeName}
              </Text>
              <Text style={[styles.miItemText, styles.miitTitle]}>关系</Text>
            </View>
            <View style={styles.miItem}>
              <Text style={styles.miItemText}>
                {currentMember.hasSocialSecurity ? '有' : '无'}
              </Text>
              <Text style={[styles.miItemText, styles.miitTitle]}>社保</Text>
            </View>
          </View>
        </View>
        <View style={styles.middle}>
          <List>
            <Item extra={currentMember.mobile || '缺失'}>
              <Text>手机号</Text>
            </Item>
            <Item extra={currentMember.idCardNo || '缺失'}>
              <Text>身份证号</Text>
            </Item>
          </List>
        </View>
        {currentMember.relationType === 1 ? null : (
          <View style={styles.bottom}>
            <Text
              style={styles.delBtn}
              onPress={() =>
                this.removeMember(this.props.customerId, currentMember.customerFamilyMemberId)
              }
            >
              删除家庭成员
            </Text>
          </View>
        )}
      </View>
    );
  }
}

export default MemberDetail;
